Elemen Block dan Inline HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

Dalam HTML, terdapat dua tipe elemen yaitu block element dan inline element. Block element digunakan untuk membuat elemen HTML yang akan menempati satu baris penuh atau blok. Sementara, inline element digunakan untuk membuat elemen HTML yang akan menempati sebagian dari satu baris atau sejajar dengan konten lain di dalam elemen tersebut.

Elemen Block

Elemen block HTML pada umumnya akan menempati satu baris penuh atau blok dalam dokumen HTML. Elemen ini biasanya digunakan untuk menempatkan satu bagian dari sebuah konten pada web. Berikut yang termasuk kedalam elemen block.

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div> <dl> <dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6> <header> <hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p> <pre>
<section>
<table>
<tfoot>
<ul>
<video>

Contoh penggunaanya yaitu:

<div>
  <h1>Judul</h1>
  <p>Paragraf 1</p>
  <p>Paragraf 2</p>
</div>

Keluaran dari kode diatas sebagai berikut:

Judul

Paragraf 1

Paragraf 2

Elemen Inline

Elemen inline HTML adalah elemen yang tidak menempati satu baris penuh atau blok dalam dokumen HTML, tetapi hanya menempati sebagian kecil dari baris atau bahkan satu karakter saja. Elemen ini biasanya digunakan untuk menambahkan detail atau gaya ke dalam teks, seperti teks tebal, italic, hyperlink, dan sebagainya.

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite> <code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label> <map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small> <span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

Contoh penggunaanya:

<p><strong>Semakin keras</strong> kamu bekerja untuk sesuatu, <strong>semakin besar</strong> kamu merasakannya ketika mencapainya.</p>

Hasil outpunya yaitu:

Semakin keras kamu bekerja untuk sesuatu, semakin besar kamu merasakannya ketika mencapainya.

Huruf yang dicetak tebal menggunakan elemen inline <strong>.